<div class="row timelineChart newChart">
    <ba-card baCardClass="with-scroll table-panel">
        <div class="row">
           <div class="col-md-2 userInfo"></div>
            <div class="col-md-8 userInfo">
                <span><label>{{userName}}</label></span>
            </div>
            <div class="col-md-2 userData">
              <button type="submit" class="btn btn-primary downloadButton" (click)="getCSV($event)">Download CSV
              </button>
            </div>
        </div>

        <div class="channels-block">

            <div class="chart-bg"></div>
            <div class="traffic-chart" id="trafficChart">
                <div class="canvas-holder">
                    <canvas class="chart-area" width="300px" height="300px"></canvas>
                    <div class="traffic-text">
                        <span>{{textLable}}</span>
                        {{total}}
                    </div>
                </div>
                <div class="traffic-legend"></div>
            </div>

            <div class="channels-info">
                <div>
                    <div class="channels-info-item" *ngFor="let item of doughnutData">
                        <div class="legend-color" [ngStyle]="{'background-color': item.color }"></div>
                        <p>{{ item.label }}<span class="channel-number">+{{ item.percentage }}%</span></p>
                        <div class="progress progress-sm channel-progress">
                            <div class="progress-bar" role="progressbar"
                                 [attr.aria-valuenow]="item.percentage" aria-valuemin="0" aria-valuemax="100"
                                 [ngStyle]="{width: item.percentage + '%' }">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ba-card>
</div>
